<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 循环生成 评论项 -->
    <Item v-for="(item, i) in list" :key="i" :comment="item" />
  </van-list>
</template>

<script>
// 评论接口方法
import { getComments } from '@/api/comment.js'

// 导入 评论事件中心对象
import bus from '../commentBus'

// 导入 评论项 组件
import Item from './CommentItem.vue'

export default {
  name: 'comment',
  components: { Item },
  props: {
    // 文章或评论 id
    artId: {
      required: true
    },
    // 类型（a->文章回复列表    c->评论的回复列表）
    type: {
      type: String,
      default: 'a', // a / c
      validator(v) {
        return v === 'a' || v === 'c'
      }
    }
  },
  data() {
    return {
      level: 2,
      list: [], // 评论数组
      loading: false,
      finished: false,
      // 分页参数
      query: {
        type: this.type,
        source: this.artId.toString(),
        offset: null,
        limit: 20
      }
    }
  },
  created() {
    // 如果 type=a，说明 当前 是 用在 文章详情页的 评论列表
    // 如果 type!=a，说明 当前 是 用在 评论回复页 的回复列表
    this.type === 'a' && this.onLoad()
    // 向事件中心 注册事件
    bus.$on('onAddPL', this.addPL)
  },
  methods: {
    // list 组件的 load事件触发机制： 首次加载 + 触底----
    async onLoad() {
      // 异步更新数据
      const { data: res } = await getComments(this.query)
      // 1.添加数据
      this.list.push(...res.data.results)
      // 2.保存 当前页的最后一个评论id(用作 请求下一页 使用)
      this.query.offset = res.data.last_id
      // 3.关闭 加载状态
      this.loading = false
      // 4.判断是否有数据
      if (res.data.results.length === 0) {
        this.finished = true
      }
      // 5.将 评论总数 传给 父组件
      console.log(res.data.total_count)
      this.$emit('onCommentCount', res.data.total_count)
    },
    // 添加评论数据方法--------------------------------
    addPL(newComment) {
      this.list.unshift(newComment)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
</style>
